import React, {useEffect, useState} from 'react'
import { AtInput,AtList, AtListItem }  from 'taro-ui'
import {View,Text, Image, Picker} from '@tarojs/components'

import './index.scss'
export default function binDingInfo(){

  const [name,useName] = useState('小猪嗷嗷叫')
  // 性别
  const [sex,useSex] = useState([
    '男','女'
  ])
  // 生日
  const [birthday,useBirthday] = useState()
  // 改变性别
  function changeSex(index){
    // useSex(sex[index])
  }
  function subInfo(){
    console.log(name)
  }
  return (
    <View className='binding_info'>
      <View className='info_list'>
        <View className='info_item'>
            <Text>头像</Text>
          <View className='item_fr'>
            <Image className='user_img' src={require('../../../static/images/moguj.png')} />
            <Image className='item_fr_img' src={require('../../../static/images/yyt.png')} />

          </View>
        </View>
        <View className='info_item'>
          <Text>昵称</Text>
          <View className='item_fr'>
            <AtInput
              name='value'
              type='text'
              placeholder='输入昵称'
              value={name}
              onChange={e => useName(e)}
            />
          </View>
        </View>
        <View className='info_item'>
          <Text>手机号</Text>
          <View className='item_fr'>
            <Text>123123123</Text>
          </View>
        </View>
        <View className='info_item'>
          <Text>性别</Text>
          <View className='item_fr' style={{display: 'flex'}}>
            <Picker className='fr_picker' mode='selector' range={sex} onChange={(e) => changeSex(e.target.value)}>
            <AtList>
              <AtListItem
                extraText={'男'}
              />
            </AtList>
          </Picker>
            <Image style={{margin: 'auto'}} className='item_fr_img' src={require('../../../static/images/yyt.png')} />

          </View>
        </View>
        <View className='info_item'>
          <Text>生日</Text>
          <View className='item_fr' style={{display: 'flex'}}>
            <Picker className='fr_picker' mode='date' >
              <AtList>
                <AtListItem title='请选择日期' />
              </AtList>
            </Picker>
            <Image style={{margin: 'auto'}} className='item_fr_img' src={require('../../../static/images/yyt.png')} />

          </View>
        </View>
      </View>
      {/*按钮*/}
      <View className='info_btn' onClick={() => subInfo()}>
        保存
      </View>
    </View>
  )
}
